<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../../css/personimfcss/changepassword.css">
        <script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
        <script th:inline="javascript">
            var userid = [[${userid}]];
            var a=0;
            var b=0;
            var c=0;
            var d=0;
            //验证密码
            function checkOldPassword() {
                password=$("#password").val();
                $.ajax({
                    url: 'checkOldPassword.do?userid='+userid+'&password='+password,
                    success: function (data) {
                        if(data==0&&password==""){
                            a=0;
                            $("#oldpassword").css('display', 'inline');
                        }
                        else{
                            a=1;
                            $("#oldpassword").css('display', 'none');
                        }
                    }
                })

            }
            function checknewpassword1() {
                newpassword=$("#newpassword").val();
                newpassword1=$("#checknewpassword").val();
                if (newpassword!=newpassword1||newpassword1==""){
                    b=0;
                    $("#newpassword1").css('display', 'inline');
                }
                else {
                    b=1;
                    $("#newpassword1").css('display', 'none');
                }

            }
            function checknewpassword2() {
                newpassword=$("#newpassword").val();
                var m=newpassword.replace(/\s+/g,"")//去掉空格
                var regu2 = /^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/;//密码要包含字母，数字，不能有特殊符号
                if(m.length<6||!regu2.test(m)){
                    d=0;
                    $("#newpassword2").css('display','inline')
                }
                else {
                    d=1;
                    $("#newpassword2").css('display', 'none');
                }

            }
            function shwoemail() {
                email=$("#email1").val()
                $.ajax({
                    url: 'checkEmail.do?userid='+userid+'&email='+email,
                    success: function (data) {
                        if(data==0&&email==""){
                            c=0;
                            $("#email").css('display', 'inline');
                        }
                        else{
                            c=1;
                            $("#email").css('display', 'none');
                        }
                    }
                })
            }
            //密码保存提交
            function baocun() {
                if (a==1&&b==1&&c==1&&b==1){
                    newpassword=$("#newpassword").val();
                    $.ajax({
                        url: 'changePassword.do?userid='+userid+'&password='+newpassword,
                        success: function (data) {
                        }
                    })
                    $('#background').css('display', 'block');
                    $('#chenggong').css('display', 'block');
                    $('#shibai').css('display', 'none');
                }
                else {
                    $('#background').css('display', 'block');
                    $('#shibai').css('display', 'block');
                    $('#chenggong').css('display', 'none');

                }


            }
        </script>
    </head>
    <body>
        <div class="zong">
            <div class="header">
                <h4>你必须填写原密码和邮箱才能更改密码</h4>
                <hr>
            </div>
            <div class="main">
              <form>
                <table>
                    <tr>
                        <td><span style="color: #FF0000;">*</span><span style="color: gray;">旧密码</span></td>
                        <td><input type="password" id="password" onblur="checkOldPassword()">
                            <p id='oldpassword' style='font-size: small;color: red;display: none'>原密码错误</p>
                        </td>
                    </tr>
                    <tr>
                        <td><span style="color: #FF0000;">*</span><span style="color: gray;">新密码</span></td>
                        <td><input type="password" id="newpassword" onblur="checknewpassword2()">
                            <p id='newpassword2' style='font-size: small;color: red;display: none'>密码要大于或等于6位,包含数字、字母，不能有特殊符号</p></td>
                    </tr>
                    <tr>
                        <td><span style="color: #FF0000;">*</span><span style="color: gray;">确认新密码</span></td>
                        <td><input type="password" id="checknewpassword" onblur="checknewpassword1()">
                            <p id='newpassword1' style='font-size: small;color: red;display: none'>两次密码不一样</p>
                        </td>
                    </tr>
                    <tr><td><span style="color: #FF0000;">*</span><span style="color: gray;">Email</span>
                        <td><input type="email" id="email1" onblur="shwoemail()">
                        <p id='email' style='font-size: small;color: red;display: none'>邮箱输入错误</p></td>
                    </tr>
                </table>
                <input type="button" value="保存" id="h" onclick="baocun()">
                  <div class="tanchuang">
                      <!-- 弹窗内容开始 -->
                      <div id="background" class="back" >
                          <div id="div1" class="content">
                              <div id="close">
                                  <span id="close-button">×</span>
                                  <h2>提示框</h2>
                              </div>
                              <div id="div2">
                                  <h3 style="text-align: center;display: none" id="shibai">修改密码失败，请检查是否填写正确</h3>
                                  <h3 style="text-align: center;display: none" id="chenggong">修改密码成功</h3>
                              </div>
                          </div>
                      </div>
                      <script>
                          var div = document.getElementById('background');
                          var close = document.getElementById('close-button');
                          close.onclick = function close() {
                              div.style.display = "none";
                          }

                          window.onclick = function close(e) {
                              if (e.target == div) {
                                  div.style.display = "none";
                              }
                          }
                      </script>

                  </div>
            </form>
            </div>
        </div>
        
    </body>
</html>